<template>
  <div class="tabs">
    <div
      v-for="tab in tabs"
      :key="tab.id"
      class="item"
      :class="{ check: tab.id === activeTab }"
      @click="onClick(tab)"
    >
      {{ tab.label }}
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("setting");

// 接收当前激活id
const props = defineProps<{ activeTab: number }>();
const emit = defineEmits(["change"]);

// tabs 数据
const tabs = [
  { id: 1, key: "deposit", label: lang.transactions_deposit },
  { id: 2, key: "withdraw", label: lang.transactions_withdraw },
];

const onClick = (tab: any) => emit("change", tab);
</script>

<style scoped lang="scss">
.tabs {
  margin: 0.3rem 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
}
.item {
  width: 50%;
  height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.35rem;
  font-weight: 800;
  color: #8b6e8b;
  position: relative;
}
.check {
  color: var(--theme-neutral1);
}
.item::after {
  content: "";
  width: 2rem;
  height: 0.1rem;
  border-radius: 0.2rem;
  background: transparent;
  position: absolute;
  bottom: 0;
}
.check::after {
  background: var(--theme-neutral1);
}
</style>
